<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }
        
        #after {
            display: none;
        }
        
        .xinguan-vaccines {
            display: none;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
            /* clear: both; */
        }
        
        .loading-div {
            width: 1800px;
            height: 720px;
            background-color: #fff;
            display: table-cell;
            vertical-align: middle;
            color: #555;
            overflow: hidden;
            text-align: center;
        }
        
        .loading-div::before {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>





<body>
    <script type="text/javascript">
        var w = document.body.clientWidth;
        var h = document.body.clientHeight;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        document.body.appendChild(canvas);
        canvas.style.backgroundColor = "#0073B3";
        var context = canvas.getContext('2d');
        var Rot = 0;
        var R_init = 0;
        var timer = null;
        var targent_R = Math.round(w / 10);
        setInterval(function() {

            R_init = R_init + 1;
            if (R_init < targent_R + 1) {
                Drawcilrcle(context, R_init);

                if (R_init === targent_R) {
                    setTimeout(function() {

                        clearInterval(timer);

                        timer = setInterval(function() {
                            Rot = Rot + 1;
                            if (Rot < 180) {
                                Drawcilrcle(context, targent_R);
                                Drawmove(context, targent_R, Rot);
                                Drawmove_bottom(context, targent_R, Rot);
                                Drawtext(context, Rot)
                            } else if (Rot === 180) {
                                Drawcilrcle(context, targent_R);
                                Drawfinsh(context, targent_R, 360);
                                Drawtext(context, Rot);

                            }


                        }, 10);
                    }, 50);
                }
            }


        }, 5);


        function Drawcilrcle(cxt, r) {
            cxt.clearRect(0, 0, w, h);
            cxt.beginPath();
            cxt.arc(w / 2, h / 2, r, 0, 2 * Math.PI);
            cxt.fillStyle = "rgba(255,255,255,0.2)";
            cxt.fill();
            cxt.beginPath();
            cxt.arc(w / 2, h / 2, r + 20, 0, 2 * Math.PI);
            cxt.strokeStyle = "rgba(0,0,0,0.2)";
            cxt.lineWidth = 1;
            cxt.stroke();
            cxt.closePath();
        }

        function Drawmove_bottom(cxt, r, rot) {
            cxt.save();
            cxt.beginPath();
            cxt.translate(w / 2, h / 2); //将画布坐标系原点移至中心
            cxt.rotate(rot / 180 * Math.PI);
            cxt.translate(-(w / 2), -(h / 2)); //修正画布坐标系
            cxt.arc(w / 2, h / 2, r + 20, 0, rot / 180 * Math.PI);
            cxt.strokeStyle = "rgba(255,255,255,0.3)";
            cxt.lineWidth = 6;
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }

        function Drawmove(cxt, r, rot) {
            cxt.save();
            cxt.beginPath();
            cxt.translate(w / 2, h / 2); //将画布坐标系原点移至中心
            cxt.rotate(rot / 180 * Math.PI);
            cxt.translate(-(w / 2), -(h / 2)); //修正画布坐标系
            cxt.arc(w / 2, h / 2, r + 20, 180 / 180 * Math.PI, (rot + 180) / 180 * Math.PI);
            cxt.strokeStyle = "rgba(255,255,255,0.3)";
            cxt.lineWidth = 6;
            cxt.stroke();
            cxt.restore();
            cxt.closePath();

        }

        function Drawfinsh(cxt, r, rot) {
            cxt.save();
            cxt.beginPath();
            cxt.arc(w / 2, h / 2, r + 20, 0, 2 * Math.PI);
            cxt.strokeStyle = "rgba(255,255,255,0.3)";
            cxt.lineWidth = 6;
            cxt.stroke();
            cxt.restore();
            cxt.closePath();
            clearInterval();
            canvas.style.display = "none";
            document.getElementById("after").style.display = "block";
            // document.getElementsByClassName(".xinguan-vaccines").style.display = "block";
            document.getElementById("all-article").style.display = "block";

        }

        function Drawtext(cxt, rot) {
            cxt.save();
            cxt.beginPath();
            cxt.textAlign = "center";
            cxt.font = " 20pt  Aira";
            cxt.fillStyle = "rgba(255,255,255,1)";
            cxt.fillText("数据加载中...." +
                Math.round(rot / 180 * 100) + "%", w / 2, h / 2 + 10);
            cxt.restore();
            cxt.closePath();

        }
    </script>



    <div id="after">


        <!-- 顶部图片 -->
        <div class="top-pic"></div>
        <!-- 疫情热点 -->
        <div class="redian">
        </div>
        <!-- 风险地区 -->
        <div class="danger">
            <!-- 导航 -->
            <div class="nav">
                <div class="danger-item active">地区风险</div>
            </div>
            <div class="recent">
                <div class="title">
                    <div class="recent-title">重点城市疫情分布</div>
                    <div class="jiezhi">截至北京时间2021-5-31 12:08</div>
                </div>
                <!-- 风险地区可视化部分 -->
                <div class="data-view">

                </div>
            </div>
            <!-- 国内疫情地图 -->
            <div class="china-virual-map">
                <div class="title">
                    国内疫情地图
                </div>
                <div class="maps-btn">
                    <div class="exist-btn active" data-index="0">现有确诊</div>
                    <div class="danger-btn" data-index="1">风险地区</div>
                    <div class="total-btn" data-index="2">累计确诊</div>
                </div>
                <div class="data-view-map">
                    <div class="active">
                        <img src="./imgs/guoneiqushi1.png" alt="">
                    </div>
                    <div>
                        <img src="./imgs/guoneiqushi2.png" alt="">
                    </div>
                    <div>
                        <img src="./imgs/guoneiqushi3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 国内数据 -->
        <div class="china">
            <!-- 导航 -->
            <div class="nav">
                <div class="guonei-item active">国内数据</div>
            </div>
            <!-- 国内疫情趋势 -->
            <div class="title">国内疫情趋势</div>
            <div class="qushi">
                <div class="qushi-view">
                    <div class="qushi-box" id="guonei-qushi-box">
                        <img src="./imgs/guoneiqushi1.png" alt="">
                        <img src="./imgs/guoneiqushi2.png" alt="">
                        <img src="./imgs/guoneiqushi3.png" alt="">
                        <img src="./imgs/guoneiqushi4.png" alt="">
                    </div>

                    <div class="left-arrow" id="guonei-left">
                    </div>
                    <div class="right-arrow" id="guonei-right">></div>
                </div>
                <!-- 中国的数据可视化 -->
                <div class="china-view">
                </div>
            </div>
        </div>


        <!-- 全球数据 -->
        <div class="earth">
            <!-- 导航 -->
            <div class="nav">
                <div class="global-item active">全球数据</div>
            </div>
            <div class="title">重点国家疫情数据</div>
            <!-- 重点国家疫情数据 可视化部分-->
            <div class="focus-country">
            </div>
            <div class="title">国外疫情趋势</div>
            <div class="qushi">
                <div class="qushi-view">
                    <div class="qushi-box" id="guowai-qushi-box">
                        <img src="./imgs/earthqushi1.png" alt="">
                        <img src="./imgs/earthqushi2.png" alt="">
                        <img src="./imgs/earthqushi3.png" alt="">
                    </div>
                    <div class="left-arrow" id="guowai-left">
                    </div>
                    <div class="right-arrow" id="guowai-right">></div>
                </div>
            </div>
            <!-- 全球的的疫情数据可视化 -->
            <div class="earth-view">
                <div class="title">疫情数据</div>
                <!-- 欧洲数据可视化 -->
                <div class="ouzhou">
                    <div class="small-title">欧洲</div>
                    <div class="ouzhou-view"></div>
                </div>

            </div>
        </div>
    </div>
    <!-- 新冠疫苗 -->
    <div class="xinguan-vaccines" id="all-article">
    </div>
    <!-- 谣言排行榜
<div class="yaoyan"></div> -->
    </div>



    </div>





</body>

<script src="./js/index.js"></script>
<!--  引入Echarts脚本 -->
<script src="js/echarts.min.js"></script>
<!-- 引入自定义js文件 -->
<script src="js/tu.js"></script>

</html>